丁鹿学堂前端培训：vue基础之v

2024-06-19 06:53| 来源: 网络整理| 查看: 265

v-if和v-show

v-show和v-if都是vue的指令。我们通过v-if或者v-show可以控制元素的显示和隐藏。

v-if可以和v-else-if，v-else一起使用进行逻辑判断

num 的值{{num}} num的值{{num}} {{num}} export default{ data(){ return { num:1 } } }

v-show的使用和v-if类似

33333 区别：

1 v-if相当于把dom移除了，v-show相当于加了一个属性display:none,所以如果是频繁显示隐藏切换的，使用v-show可以提高性能。

2 v-if 可以在template标签上使用，v-show不可以。

v-for

语法 v-for = “(item,index) in arr” v-for必须有属性:key key的作用主要是为了高效的更新虚拟DOM,key值只能是数字或字符串,这个key属性必须是唯一的标识.

v-for多数用来遍历数组，但也可以便利对象

遍历数组：

{{item}} // .... data(){ return { num:1, list:['苹果','菠萝','橘子','葡萄'] } }

遍历对象

{{key}}:{{value}}--{{index}} // ... obj:{ name:'zhangsan', age:18 }

name:zhangsan–0 age:18–1

注意：v-if和v-for不能同时使用，因为v-if的优先级是大于v-for的。可以在v-for中嵌套v-if

【本文地址】

公司简介

联系我们